<template>
  <div class="dashboard-container body-min-width">
    <h2 class="head-big-title">{{ detailData.dealerName }}
      <el-button
        round
        type="danger"
        size="medium"
        style="float: right;margin-right: 5%"
        @click="delCustomers">Padam</el-button>
    </h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 10px 1% 80px 2%;">
      <el-form
        :inline="true"
        v-model="detailData"
        label-position="top"
        size="medium"
        label-width="110px">
        <el-form-item label="Nama: " class="two-hang">
          <el-input v-model="detailData.dealerName"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Pendaftaran Syarikat: " class="two-hang">
          <el-input v-model="detailData.syarikatCode"></el-input>
        </el-form-item>
        <el-form-item label="Logo Syarikat: " style="height: 122px;position: relative;" class="four-hang" v-if="detailData.typeCompany">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="upload"
            :limit="1"
            action="http://"
            accept=".jpg, .png"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :file-list="fileList"
            list-type="picture"
            :http-request="uploadFile"
            :auto-upload="false">
            <img v-show="!(fileList.length && fileList.length > 0)" slot="trigger" :src="picbase + detailData.logoUrl" style="width: 80px;"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="SSM: " style="height: 122px;position: relative;" class="four-hang" v-if="detailData.typeCompany">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="uploadSSM"
            :limit="1"
            action="http://"
            :on-change="handleChangeSSM"
            :on-remove="handleRemoveSSM"
            :on-exceed="handleExceedSSM"
            :file-list="fileListSSM"
            list-type="picture"
            :http-request="uploadFileSSM"
            :auto-upload="false">
            <img v-show="!(fileListSSM.length && fileListSSM.length > 0)" slot="trigger" :src="picbase + detailData.certificateUrl" style="width: 80px;"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="Nombor IC" style="height: 122px;position: relative;" class="four-hang" v-if="!detailData.typeCompany">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="uploadIC"
            multiple
            :limit="1"
            action="http://"
            accept=".jpg, .png"
            :on-change="handleChangeIC"
            :on-remove="handleRemoveIC"
            :on-exceed="handleExceedIC"
            :file-list="fileListIC"
            list-type="picture"
            :http-request="uploadFileIC"
            :auto-upload="false">
            <img v-show="!(fileListIC.length && fileListIC.length > 0)" slot="trigger" :src="picbase + detailData.certificateUrl" style="width: 80px;"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="Uility Bill" style="height: 122px;position: relative;" class="four-hang" v-if="!detailData.typeCompany">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="uploadUB"
            multiple
            :limit="1"
            action="http://"
            :on-change="handleChangeUB"
            :on-remove="handleRemoveUB"
            :on-exceed="handleExceedUB"
            :file-list="fileListUB"
            list-type="picture"
            :http-request="uploadFileUB"
            :auto-upload="false">
            <img v-show="!(fileListUB.length && fileListUB.length > 0)" slot="trigger" :src="picbase + detailData.utilityBillUrl" style="width: 80px;"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="Nombor Telefon" class="two-hang">
          <el-input v-model="detailData.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="Jenis Syarikat" class="two-hang" v-if="detailData.typeCompany">
          <el-select v-model="detailData.typeCompany">
            <el-option label="Berhad" :value="0"></el-option>
            <el-option label="Sdn Bhd" :value="1"></el-option>
            <el-option label="Partnership" :value="2"></el-option>
            <el-option label="Enterprise" :value="3"></el-option>
            <el-option label="Others" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Jenis Perniagaan" class="two-hang" v-if="detailData.typeCompany">
          <el-input v-model="detailData.typeBusiness"></el-input>
        </el-form-item>
        <el-form-item label="Emel" class="two-hang">
          <el-input v-model="detailData.emailAddress"></el-input>
        </el-form-item>
        <el-form-item label="Kod Dealer Utama" class="two-hang" v-show="detailData.dealerType == dealerValue">
          <el-input v-model="detailData.registCode" placeholder="Kod Dealer Utama"></el-input>
        </el-form-item>
        <el-form-item label="Kod Dealer" class="two-hang" v-show="detailData.dealerType == dealerMValue">
          <el-input v-model="detailData.inviteCode" placeholder="Kod Dealer"></el-input>
        </el-form-item>
        <h2 class="big-title" v-show="!(detailData.dealerType == 4)">Pembayaran</h2>
        <el-checkbox
          v-show="!(detailData.dealerType == 4)"
          v-model="detailData.needPay"
          label="Payment through Owner's Payment Gateway"
          style="font-size: 14px;position: relative;top: 6px;"
          name="type"
          :true-label="1"
          :false-label="0"></el-checkbox>
        <h2 class="big-title">Infomasi Bil</h2>
        <el-form-item label="Nama" class="two-hang">
          <el-input v-model="detailData.shopAddr.name"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon" class="two-hang">
          <el-input v-model="detailData.shopAddr.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1" class="one-hang">
          <el-input v-model="detailData.shopAddr.streetAddress"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2" class="one-hang">
          <el-input v-model="detailData.shopAddr.regionalAddress"></el-input>
        </el-form-item>
        <el-form-item label="Bandar" class="two-hang">
          <el-input v-model="detailData.shopAddr.city"></el-input>
        </el-form-item>
        <el-form-item label="Poskod" class="two-hang">
          <el-input v-model="detailData.shopAddr.postCode"></el-input>
        </el-form-item>
        <el-form-item label="Negara" class="two-hang">
          <el-select v-model="detailData.shopAddr.country">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Negeri" class="two-hang">
          <el-select v-model="detailData.shopAddr.region">
            <el-option v-for="(item, index) in $regionList" :key="index" :label="item.en" :value="item.en" />
          </el-select>
        </el-form-item>
        <h2 class="big-title">
          Infomasi Penghantaran
          <el-checkbox
            v-show="detailData.dealerType == 4"
            v-model="shopAddrMATCHbillingAddr"
            label="Infomasi Bil mengikut Infomasi Penghantaran"
            style="margin-left: 6%;font-size: 14px;position: relative;top: 6px;"
            name="type"
            @change="changeMatch"></el-checkbox>
        </h2>
        <el-form-item label="Nama" class="two-hang">
          <el-input v-model="detailData.billingAddr.name"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon" class="two-hang">
          <el-input v-model="detailData.billingAddr.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1" class="one-hang">
          <el-input v-model="detailData.billingAddr.streetAddress"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2" class="one-hang">
          <el-input v-model="detailData.billingAddr.regionalAddress"></el-input>
        </el-form-item>
        <el-form-item label="Bandar" class="two-hang">
          <el-input v-model="detailData.billingAddr.city"></el-input>
        </el-form-item>
        <el-form-item label="Poskod" class="two-hang">
          <el-input v-model="detailData.billingAddr.postCode"></el-input>
        </el-form-item>
        <el-form-item label="Negara" class="two-hang">
          <el-select v-model="detailData.billingAddr.country">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Negeri" class="two-hang">
          <el-select v-model="detailData.billingAddr.region">
            <el-option v-for="(item, index) in $regionList" :key="index" :label="item.en" :value="item.en" />
          </el-select>
        </el-form-item>
        <el-form-item label="Status" class="one-hang">
          <el-select v-model="detailData.state">
            <el-option label="Mohon" :value="0"></el-option>
            <el-option label="Lulus" :value="1"></el-option>
            <el-option label="Dilarang" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button type="primary" @click="saveDataNow" style="float: right;margin: 16px 4% 20px 100px;">Simpan</el-button>
          <el-button @click="$router.push({path: '/Customers'})" style="float: right;margin: 16px 0 20px 0;">Balik</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { editDealerApi, uploadFileApi, deleteDealerApi } from '@/api/user'

export default {
  name: 'CustomersDetails',
  data() {
    return {
      detailData: {
        shopAddr: {},
        billingAddr: {}
      },
      fileData: new FormData(),
      fileDataSSM: new FormData(),
      fileListIC: [],
      fileDataIC: new FormData(),
      fileListUB: [],
      fileDataUB: new FormData(),
      searchFormData: {},
      shopAddrMATCHbillingAddr: false,
      fileList: [],
      fileListSSM: [],
      stock: ''
    }
  },
  created() {
    this.checkID()
  },
  mounted() {
  },
  methods: {
    changeNew() {
      this.$forceUpdate()
    },
    changeMatch() {
      if (this.shopAddrMATCHbillingAddr) {
        this.detailData.shopAddr.region = this.detailData.billingAddr.region
        this.detailData.shopAddr.country = this.detailData.billingAddr.country
        this.detailData.shopAddr.name = this.detailData.billingAddr.name
        this.detailData.shopAddr.phoneNumber = this.detailData.billingAddr.phoneNumber
        this.detailData.shopAddr.streetAddress = this.detailData.billingAddr.streetAddress
        this.detailData.shopAddr.regionalAddress = this.detailData.billingAddr.regionalAddress
        this.detailData.shopAddr.city = this.detailData.billingAddr.city
        this.detailData.shopAddr.postCode = this.detailData.billingAddr.postCode
      } else {
        this.detailData.billingAddr = {}
      }
    },
    uploadFile(file) {
      this.fileData.append('mf', file.file)
    }, // 上传文件
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileList.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB')
        } else {
          this.fileData = new FormData()
          this.$refs.upload.submit()
          this.fileData.append('num', 0)
          this.fileData.append('index', 1)
          uploadFileApi(this.fileData).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.detailData.logoUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemove(file, fileList) {
      this.fileList = fileList
    }, // 移除
    handleExceed(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChange(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileList = fileList
      this.submitUpload()
    }, // 监控上传文件列表
    uploadFileSSM(file) {
      this.fileDataSSM.append('mf', file.file)
    }, // 上传文件
    submitUploadSSM() {
      if (this.fileListSSM.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileListSSM.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB')
        } else {
          this.fileDataSSM = new FormData()
          this.$refs.uploadSSM.submit()
          this.fileDataSSM.append('num', 0)
          this.fileDataSSM.append('index', 1)
          uploadFileApi(this.fileDataSSM).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.detailData.certificateUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemoveSSM(file, fileList) {
      this.fileListSSM = fileList
    }, // 移除
    handleExceedSSM(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChangeSSM(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileListSSM = fileList
      this.submitUploadSSM()
    }, // 监控上传文件列表
    uploadFileIC(file) {
      this.fileDataIC.append('mf', file.file)
    }, // 上传文件
    submitUploadIC() {
      if (this.fileListIC.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileListIC.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB')
        } else {
          this.fileDataIC = new FormData()
          this.$refs.uploadIC.submit()
          this.fileDataIC.append('index', 0)
          this.fileDataIC.append('num', 0)
          console.log(this.fileDataIC)
          uploadFileApi(this.fileDataIC).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.detailData.certificateUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemoveIC(file, fileList) {
      this.fileListIC = fileList
    }, // 移除
    handleExceedIC(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChangeIC(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileListIC = fileList
      this.submitUploadIC()
    }, // 监控上传文件列表
    uploadFileUB(file) {
      this.fileDataUB.append('mf', file.file)
    }, // 上传文件
    submitUploadUB() {
      if (this.fileListUB.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileListUB.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB')
        } else {
          this.fileDataUB = new FormData()
          this.$refs.uploadUB.submit()
          this.fileDataUB.append('index', 0)
          this.fileDataUB.append('num', 0)
          console.log(this.fileDataUB)
          uploadFileApi(this.fileDataUB).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.detailData.utilityBillUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemoveUB(file, fileList) {
      this.fileListUB = fileList
    }, // 移除
    handleExceedUB(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChangeUB(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileListUB = fileList
      this.submitUploadUB()
    }, // 监控上传文件列表
    checkID() {
      const detail = this.$getDetail()
      if (detail) {
        if (detail.dealerName && detail.dealerId) {
          this.detailData = detail
          if (!detail.shopAddr) {
            this.detailData.shopAddr = {}
          }
          if (!detail.billingAddr) {
            this.detailData.billingAddr = {}
          }
          return true
        }
      }
      this.$router.push({ name: '/Customers' })
    },
    delCustomers() {
      deleteDealerApi([this.detailData.id]).then(res => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
        this.$router.push({ path: '/Customers' })
      }).catch(err => {
        console.log(err)
      })
    },
    saveDataNow() {
      editDealerApi(this.detailData).then(res => {
        this.$message({
          message: 'Berjaya ubah!',
          type: 'success'
        })
        this.$router.push({ path: '/Customers' })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }
  .one-hang{
    display: block;
    width: 100%;
    margin: 0;
    .el-input{
      width: 98%;
    }
    .el-select{
      width: 98%;
    }
  }
  .two-hang{
    display: inline-block;
    width: 50%;
    margin: 0;
    .el-input{
      width: 96%;
    }
    .el-select{
      width: 96%;
    }
  }
  .four-hang{
    display: inline-block;
    width: 25%;
    margin: 0;
    .el-input{
      width: 96%;
    }
    .el-select{
      width: 96%;
    }
  }
  .three-hang{
    width: 30%;
    margin-right: 3%;
  }
</style>
<style scoped>
  /deep/.head-search label{
    line-height: 30px;
  }
  /deep/ .el-upload-list{
    width: 88px;
    padding: 0;
    margin: 0;
    position: relative;
    bottom: 60px;
  }
  /deep/ .el-upload-list img{
    width: 70px;
    height: 70px;
  }
  /deep/ .el-upload img{
    width: 80px;
    height: 80px;
  }
  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0;
  }

</style>
